import React from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import TweenOne from 'components/motionsRender/components/tweenOne';
import FrameImgPreview from 'components/motionsRender/modules/frameImage/preview';
import FrameRectanglePreview from 'components/motionsRender/modules/frameRectangle/preview';
import FrameCirclePreview from 'components/motionsRender/modules/frameCircle/preview';
import FrameVideoPreview from 'components/motionsRender/modules/frameVideo/preview';
import FramePolygonPreview from 'components/motionsRender/modules/framePolygon/preview';
import css from './index.less';

@observer
export default class MotionPreviewContent extends React.Component {

  static propTypes = {
    maxWidth: PropTypes.number,
    previewMotion: PropTypes.object.isRequired,
  };

  static defaultProps = {
    maxWidth: 375,
    previewMotion: {},
  };

  constructor(props) {
    super(props);
    console.log(props);
    // this.state = {
    //   boxHeight: props.previewMotion.list[0].height,
    //   boxWidth: props.mod.width,
    // };
  }

  render() {
    const { maxWidth, previewMotion } = this.props;
    const scale = maxWidth / 750;
    const firstFrame = previewMotion.list[0];

    return (
      <div
        style={{
          height: `${firstFrame.height}px`,
          transform: `scale(${scale})`,
          transformOrigin: '0 0',
          overflow: 'hidden'
        }}
        className={css.screen}
      >
        {
          firstFrame.list.map(mod => { // 第一帧已包括所有的元素
            const props = {
              mod,
              key: mod.id,
              elementId: mod.realId,
              motion: previewMotion,
              rotates: {
                rotate: mod.rotate,
                rotateX: mod.rotateX,
                rotateY: mod.rotateY,
                skewX: mod.skewX,
                skewY: mod.skewY,
              },
              onChange: e => {
                // console.log(e);
                // console.log('e.target.clientWidth', e.target.clientWidth);
                // console.log('e.target.clientHeight', e.target.clientHeight);
              }
            };
            return (
              <TweenOne {...props}>
                {
                  mod.type === 'frameImage' && <FrameImgPreview mod={mod}/>
                }
                {
                  mod.type === 'frameRectangle' && <FrameRectanglePreview mod={mod}/>
                }
                {
                  mod.type === 'frameCircle' && <FrameCirclePreview mod={mod}/>
                }
                {
                  mod.type === 'frameVideo' && <FrameVideoPreview mod={mod}/>
                }
                {
                  mod.type === 'framePolygon' && <FramePolygonPreview mod={mod} {...this.state}/>
                }
              </TweenOne>
            );
          })
        }
      </div>
    );
  }
}
